<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟官网注册</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				//定义变量，表示验证的状态
				var checkemail=checknick=checkpass=false;
				
				$("#password2").blur(function(){
					let em=$(this).val();
					let p=$("#password").val();
					if(em==p){
						$(this).next().text("√").css("color","green"); 
						return checkpass=true; 
					} 
					$(this).next().text("两次密码输入不一致").css("color","red");
					return checkpass=false;
				});
				$("#nickname").blur(function(){
					let em=$(this).val();
					let regnick=/^\w{2,6}$/gi;
					if(regnick.test(em)){
						$(this).next().text("√").css("color","green"); 
						return checknick=true; 
					} 
					$(this).next().text("昵称不合法").css("color","red");
					return checknick=false;
				});
				$("#email").blur(function(){
					let em=$(this).val();
					//console.log(em);
					var regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					//alert(regemail.test(em));
					//alert(regemail.test(em));
					if(regemail.test(em)){
						 
						$(this).next().text("√").css("color","green");
						return checkemail=true; 
					} 
					$(this).next().text("电子邮件格式不合法").css("color","red");
					return checkemail=false;
				});
				$("#email").keypress(function(){
					let em=$(this).val();
					//console.log(em);
					var regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					//alert(regemail.test(em));
					//alert(regemail.test(em));
					if(regemail.test(em)){
						 
						$(this).next().text("√").css("color","green");
						return checkemail=true; 
					} 
					$(this).next().text("电子邮件格式不合法").css("color","red");
					return true;
				});
				$("#regs").click(function(){
					//trigger
					let f1=$("#nickname").trigger("blur");
					let f2=$("#email").trigger("blur");
					
					return checkemail&&checknick;//阻止元素的默认行为
				});
			});
		</script>
	</head>
	<body>
		<form id="reg-form" action="/reg-email.html" method="post">

			<p class="tab-on"><a href="/reg-email">邮箱注册</a></p>

			<div class="reg-rela left">
				<input type="email" name="email" placeholder="请输入您的常用邮箱" param="请输入您的常用邮箱" class="reg-input" 
					id="email" />
				<span class="reg-prev prev-mail"></span>
			</div>

			</li>
			<li>
				<div class="reg-rela left">
					<input type="text" name="nickname" placeholder="请输入昵称" param="请输入昵称" class="reg-input" 
						id="nickname" />
					<span class="reg-prev prev-tel"></span>
				</div>
			</li>
			<li>
				<div class="reg-rela left">
					<input type="password" name="password" class="reg-input" id="password" />
					<label class="psw-tip">请输入密码</label>
				</div>

			</li>
			<li>
				<div class="reg-rela left">
					<input type="password" name="password2" class="reg-input" id="password2" />
					<span></span>
					<label class="psw-tip">请再次输入密码</label>

				</div>

			</li>

			<li class="agree-li">
				<div class="agree-li-l left">
					<input type="checkbox" required class="agreeCheck" id="agree" checked />
					<label>同意<a href="javascript:void(0);" id="agreeListens">用户服务条款</a></label>
				</div>
			</li>
			<li class="submit-li">
				<input type="submit" class="reg-btn" value="注册" id="regs" />
			</li>
			</ul>
		</form>
	</body>
</html>
